<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=640">
    <title>Title</title>
    <style>
        button{ display: inline-block; font-size: 30px; border: #ccc 1px solid; padding: 10px 20px; outline: none}
        .counttime{ font-size: 24px}


        .puzzle{ list-style: none; padding: 0; margin: 0; position: relative; background-color: #eee }
        .puzzle span{ position: absolute; z-index: 1 }
        .puzzle ul{ list-style: none; padding: 0; margin: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2 }
        .puzzle ul li{ display: inline-block; position: absolute; z-index: 2 }


        .puzzle span.grid3{ width: 33.33%; height: 33.33%; box-sizing: border-box }

        .puzzle ul.grid3 li{ background-size: 300% 300%; width: 33.33%; height: 33.33%; }
        .puzzle ul.grid3 li:nth-child(1){ background-position: 0 0 }
        .puzzle ul.grid3 li:nth-child(2){ background-position: -100% 0 }
        .puzzle ul.grid3 li:nth-child(3){ background-position: -200% 0 }
        .puzzle ul.grid3 li:nth-child(4){ background-position: 0 -100% }
        .puzzle ul.grid3 li:nth-child(5){ background-position: -100% -100% }
        .puzzle ul.grid3 li:nth-child(6){ background-position: -200% -100% }
        .puzzle ul.grid3 li:nth-child(7){ background-position: 0 -200% }
        .puzzle ul.grid3 li:nth-child(8){ background-position: -100% -200% }
        .puzzle ul.grid3 li:nth-child(9){ background-position: -200% -200% }

        .puzzle[active-cur="0"] ul li:nth-child(1),
        .puzzle[active-cur="1"] ul li:nth-child(2),
        .puzzle[active-cur="2"] ul li:nth-child(3),
        .puzzle[active-cur="3"] ul li:nth-child(4),
        .puzzle[active-cur="4"] ul li:nth-child(5),
        .puzzle[active-cur="5"] ul li:nth-child(6),
        .puzzle[active-cur="6"] ul li:nth-child(7),
        .puzzle[active-cur="7"] ul li:nth-child(8),
        .puzzle[active-cur="8"] ul li:nth-child(9){ z-index: 3 !important }
        .puzzle[active-tar="0"] span:nth-child(1),
        .puzzle[active-tar="1"] span:nth-child(2),
        .puzzle[active-tar="2"] span:nth-child(3),
        .puzzle[active-tar="3"] span:nth-child(4),
        .puzzle[active-tar="4"] span:nth-child(5),
        .puzzle[active-tar="5"] span:nth-child(6),
        .puzzle[active-tar="6"] span:nth-child(7),
        .puzzle[active-tar="7"] span:nth-child(8),
        .puzzle[active-tar="8"] span:nth-child(9){ border:#ff0 5px solid; z-index: 4 !important }
    </style>
</head>
<body>

<div class="wgt-puzzle">

    <div class="counttime"><div></div><span>拼图倒计时：30秒</span></div>
    <img src="images/loading.gif" class="puzzle-loading">

    <button class="btn-play">Start</button>
    <button class="btn-pause">Pause</button>
    <button class="btn-continue">continue</button>
    <button class="btn-again">Again</button>
</div>

</body>
</html>

<script src="http://localhost:7700/lim/src/lim-2.0.js"></script>
<script src="http://localhost:7700/public/src/vendors/jquery-2.1.4.min.js"></script>
<script src="puzzle.js"></script>
<script src="puzzle-ui.js?v=1"></script>
<script>
    (function () {




        var Game= PuzzleUI();
        //配置
        Game.config({
            countTimeNumber: 10
        });
        //接口
        Game.setHandleLoading(function () {
            console.log('加载中...');
        });
        Game.setHandleReady(function () {
            console.log('加载完成');
        });
        Game.setHandleCountTime(function (time) {
            console.log(time);
        });
        Game.setHandleGameSuccess(function () {
            alert('成功');
        });
        Game.setHandleGameFail(function () {
            alert('失败');
        });

        Game.install('http://localhost:7700/lim/example/puzzle/images/main.jpg');

        //原图预览 setHandleReady 触发后才可预览
        //data_originalimage.html('<img src="http://localhost:7700/lim/example/puzzle/images/main.jpg">');






    }());




</script>